@using Abc.Core;
@{
    ViewData["Title"] = "DataConfigIndex";
}
<div class="layui-card layadmin-header">
    <div class="layui-row layui-col-space30">
        <div class="layui-col-xs24">
            <!--列表-->
            <section class="panel panel-padding">
                <section class="panel panel-padding">
                    <form class="layui-form" action="javascript:;" id="queryForm">
                        <div class="layui-inline">
                            <label class="layui-form-mid">关键词</label>
                            <div class="layui-input-inline" style="width: 300px;">
                                <input type="text" id="KeyWords" name="KeyWords" placeholder="输入关键词模糊查询" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <button id="search" class="layui-btn layui-btn-primary submitbtn" lay-submit lay-filter="search">查找</button>
                            <button id="reset" type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </form>
                </section>
                <div class="group-button">
                    @*<button class="layui-btn layui-btn-sm modal" data-params='{"content": "@(Url.Action("Info"))", "title": "添加","full":"true","type":2}'>
                    添加
                    </button>*@
                    @*<button class="layui-btn layui-btn-sm   layuiadmin-btn-list" data-type="add"> 添加</button>*@
                </div>
                <div class="layui-form">
                    <table id="listData" class="layui-hide" lay-filter="listData"></table>
                </div>
            </section>
        </div>
    </div>
</div>
@*tablebar*@
<script type="text/html" id="tablebar">
    <a class="layui-btn layui-btn-primary  layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>
    <a class="layui-btn layui-btn-danger  layui-btn-xs" lay-event="delete"><i class="layui-icon layui-icon-delete"></i></a>
    <a class="layui-btn layui-btn-xs" lay-event="more">更多<i class="layui-icon layui-icon-down"></i></a>
</script>
@*toolbar*@
<script type="text/html" id="toolbar">
    <a class="layui-btn layui-btn-primary layui-btn-md" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>新增</a>
    <a class="layui-btn layui-btn-danger  layui-btn-md" lay-event="batchRemove"><i class="layui-icon layui-icon-delete"></i>删除</a>
    <a class="layui-btn layui-btn-success layui-btn-md" lay-event="expandAll"><i class="layui-icon layui-icon-spread-left"></i>展开</a>
    <a class="layui-btn layui-btn-success layui-btn-md" lay-event="foldAll"><i class="layui-icon layui-icon-shrink-right"></i>折叠</a>
</script>


<script type="text/html" id="tpl_IsEnable">
    <input type="checkbox" name="IsEnable" objid="{{d.Id}}" lay-skin="switch" title="启用|禁用" lay-filter="IsEnable" {{ d.IsEnable ? 'checked' : '' }}>
</script>


@section Scripts{
    <script>
        layui.use(['jquery', 'form', 'table', 'laydate', 'upload', 'layer', 'treeTable'], function (exports) {
            let $ = layui.jquery;
            let form = layui.form;
            let table = layui.table;
            let laydate = layui.laydate;
            let upload = layui.upload;
            let dropdown = layui.dropdown;
            let treeTable = layui.treeTable;

            abc.indexInit();
            var cols = [
                [
                    //, templet: '#tplRechargeState'
                    { type: 'checkbox' },
                    //{ type: 'numbers', fixed: 'left', rowspan: 1 },
                    //{ title: '标签', 'toolbar': '#tplable', fixed: 'left', width: 100 },
                    //{ title: 'ID', field: 'Id', width: 60 },

                    { title: 'ID', field: 'Id', width: 50, align: 'center' },
                    { title: '名称', field: 'Name', minWidth: 60, align: 'left', edit: 'text' },
                    { title: '唯一编码', field: 'Key', minWidth: 100, align: 'left', edit: 'text' },
                    { title: '上级', field: 'PKey', minWidth: 60, align: 'center', edit: 'text', hide: true },
                    { title: '值', field: 'Value', minWidth: 60, align: 'center', edit: 'text' },
                    { title: '值2', field: 'Value2', minWidth: 60, align: 'center', edit: 'text', hide: true },
                    { title: '值3', field: 'Value3', minWidth: 60, align: 'center', edit: 'text', hide: true },
                    { title: '值4', field: 'Value4', minWidth: 60, align: 'center', edit: 'text', hide: true },
                    { title: '值5', field: 'Value5', minWidth: 60, align: 'center', edit: 'text', hide: true },
                    { title: '分组', field: 'GroupName', minWidth: 60, align: 'center', edit: 'text' },
                    { title: '排序', field: 'Sort', minWidth: 60, align: 'center', edit: 'text' },
                    { title: '是否启用', field: 'IsEnable', minWidth: 60, align: 'center', templet: '#tpl_IsEnable' },
                    { title: '备注', field: 'Remark', minWidth: 60, align: 'center', edit: 'text' },
                    { title: '扩展参数', field: 'ExtensionData', minWidth: 60, align: 'center', edit: 'text', hide: true },
                    //{ title: '创建用户ID', field: 'CreatorUserId', minWidth: 60, align: 'center' },
                    //{ title: '创建用户', field: 'CreatorUserName', minWidth: 60, align: 'center' },
                    //{ title: '创建时间', field: 'CreationTime', minWidth: 60, align: 'center' },
                    //{ title: '更新用户ID', field: 'UpdateUserId', minWidth: 60, align: 'center' },
                    //{ title: '更新用户', field: 'UpdateUserName', minWidth: 60, align: 'center' },
                    //{ title: '更新时间', field: 'UpdateTime', minWidth: 60, align: 'center' },
                    //{ title: '默认假删除', field: 'IsDeleted', minWidth: 60, align: 'center' },
                    //{ title: '删除用户ID', field: 'DeletedUserId', minWidth: 60, align: 'center' },
                    //{ title: '删除用户', field: 'DeletedUserName', minWidth: 60, align: 'center' },
                    //{ title: '删除时间', field: 'DeletedTime', minWidth: 60, align: 'center' },

                    { title: '操作', fixed: 'right', width: 160, align: 'left', toolbar: '#tablebar' }
                ]
            ];

            //table加载渲染完成
            tableDone_DataConfig = function (res, curr, count) {
                
            }
           
            // treetable();
            treetable_DataConfig = abc.treeTableRender("listData", cols, {
                url: '@(Url.Action("GetList"))',
                toolbar: '#toolbar',
                reqData: search,
                tree: { customName: { id: 'Key', pid: 'PKey', name: 'Name', isParent: true } },
                done: tableDone_DataConfig
            });


            //提交搜索
            form.on('submit(search)', function (obj) {
                abc.treeTableSearch('listData', '@(Url.Action("GetList"))', obj.field, { method: "post", done: tableDone_DataConfig });
                return false;
            });
            $("#search").click();//初始化完成后 搜索一次

            //监听头工具栏事件
            treeTable.on('toolbar(listData)', function (obj) {
                if (obj.event === 'add') {
                    abc.open({ title: '新增', url: '@(Url.Action("Info"))', area: ['90%', '90%'], end: refresh_DataConfig });
                } else if (obj.event === 'refresh') {
                    refresh_DataConfig();
                } else if (obj.event === 'batchRemove') {
                    var data = treetable_DataConfig.checkStatus();
                    if (data.length === 0) {
                        layer.msg("未选中数据", {
                            icon: 3,
                            time: 1000
                        });
                        return false;
                    }
                    //获取选中的ID
                    let ids = abc.getSelectDataIds(treetable_menu, 'listData');
                    abc.delete({ url: "@(Url.Action("Delete"))", data: { ids: ids }, success: function () { refresh_DataConfig() } });
                } else if (obj.event === 'expandAll') {
                    treeTable.expandAll('listData', true);
                }
                else if (obj.event === 'foldAll') {
                    treeTable.expandAll('listData', false);
                }
            });

            treeTable.on('tool(listData)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                if (obj.event === 'delete') {
                    abc.delete({ url: "@(Url.Action("Delete"))", data: { ids: obj.data.Id }, success: function () { obj.del(); refresh_DataConfig() } });
                } else if (obj.event === 'edit') {
                    edit_DataConfig(obj);
                }else if (obj.event === 'more') {
                    dropdown.render({
                        elem: this, // 触发事件的 DOM 对象
                        show: true, // 外部事件触发即显示
                        data: [
                            { title: '导出信息', id: 'export' },
                            { title: '下载文件', id: 'downfile' },
                            { title: '查看详情', id: 'edit' }
                        ]
                        , click: function (menudata) {
                            layer.tips('点击了：' + menudata.title, this.elem, { tips: [1, '#5FB878'] })
                            if (menudata.id === 'export') {
                                layer.tips('export：' + obj.data.Id, this.elem, { tips: [1, '#5FB878'] })
                            } else if (menudata.id === 'downfile') {
                            } if (menudata.id === 'edit') {
                            }

                        }
                    });
                }
            });
            //刷新
            refresh_DataConfig = function () {
                //table.reload("listData");
                treetable_DataConfig.reload();
            };

            //table 行双击事件
            treeTable.on('rowDouble(listData)', function (obj) { edit_DataConfig(obj); });
            //table 行中的事件监听
            //编辑
            edit_DataConfig = function (obj) {
                abc.open({ title: '编辑', url: '@(Url.Action("Info"))/' + obj.data.Id, area: ['90%', '90%'], end: refresh_DataConfig });
            }
            //IsEnable 开关事件
            form.on('switch(IsEnable)', function (obj) {
                abc.post({ url: '@(Url.Action("SetState"))', data: { Id: $(this).attr('objid'), state: obj.elem.checked, type: 'isenable' } });
            });
            //事件集合
            var active = {
                example: function () {
                },
                example1: function () {
                }
            };
            //注册layui-btn 事件
            $('.layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            // 初始化日期选择
            //abc.initDate('StartDate,EndDate');
        });
    </script>
}
